﻿<html>
<head>
	<style type="text/css">
		#wrapper {
			width: 800px;
			margin: auto;
		}
		#header {
			padding: 15px;
			padding-top: 50px;
			margin-bottom: 10px;
			background: #222;
			color: #811;
			font-size: 22pt;
			font-family: lucida grande, sans-serif;
		}
		#left {
			width: 550px;
		}
		#right {
			float: right;
			width: 200px;
		}
		#container {
			background: #ccc;
			padding: 10px;
			height: 500px;
			width: 180px;
		}
	</style>
</head>
<body>

<div id="wrapper">
	<div id="header">
		Example #1
	</div>
	<div id="right">
		<div id="container">
			<p>Scroll up and down!</p>
			<p>Notice how this sidebar slides so it's always visible.</p>
			<p>It shouldn't attach, however, if it is longer than the viewport</p>
			<p>It should detach if on resize of the browser window (would love it to stay put during this event but that's for a different day)</p>
			<p>Nifty!</p>
			
		</div>
	</div>
	<div id="left">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec quam ac purus sodales facilisis ut nec magna. Sed justo augue, suscipit ut accumsan vitae, rutrum id lectus. Nulla tincidunt rhoncus leo a sollicitudin. Nullam ut ligula in arcu lacinia congue. Aliquam in lacus in turpis interdum bibendum in quis risus. Morbi dui dolor, scelerisque eu ornare et, auctor vel arcu. Sed quis vestibulum mi. Suspendisse ac egestas ante. Morbi imperdiet purus non lorem mollis vitae scelerisque sapien vehicula. Etiam elementum porttitor ipsum vitae cursus. Mauris ut arcu diam, sit amet laoreet massa. Integer interdum tristique arcu, dictum tempor sem sodales eu. Donec ultricies dui sed leo feugiat hendrerit. Vestibulum mollis ligula sed nibh iaculis non gravida erat lobortis.</p>
		<p>Morbi est velit, commodo in scelerisque nec, ullamcorper nec neque. Nunc eget turpis quam, id sodales nunc. Ut vitae nulla vitae purus molestie sollicitudin a adipiscing lectus. Sed vel eros magna. Fusce facilisis scelerisque justo sit amet iaculis. Vestibulum sed odio magna. Nulla rutrum nunc velit, malesuada ultricies ante. Sed in convallis enim. Duis magna lorem, tempus imperdiet imperdiet vel, porta eget mauris. Aenean auctor tincidunt iaculis. Cras commodo sagittis libero nec luctus. Pellentesque ut urna id neque pretium eleifend at sit amet nunc. Aliquam accumsan pharetra eleifend. Donec vel sapien libero, non porttitor dui.</p>
		<p>Aliquam odio ante, elementum id feugiat vitae, viverra tincidunt enim. Duis dictum erat nec lacus malesuada elementum. Sed in ligula in mauris lobortis interdum. Pellentesque dolor metus, volutpat a sollicitudin vitae, suscipit sed mauris. Nulla tincidunt lectus et leo adipiscing dignissim. Phasellus mattis varius blandit. Maecenas leo lacus, congue quis accumsan a, dictum at metus. Nulla ut porta libero. Etiam dolor sapien, convallis elementum placerat ac, gravida vitae enim. Cras iaculis interdum urna id sodales. Ut eget ligula sapien. Proin eget nibh magna, condimentum venenatis turpis. Proin sagittis scelerisque libero ornare fermentum.</p>
		<p>Maecenas vel nisl ligula. Vivamus vel massa ut quam aliquet placerat quis at tellus. Nunc sed erat sapien, vitae lacinia lacus. Etiam condimentum dolor nisl, facilisis sodales ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tempor, justo vehicula tristique scelerisque, ipsum sapien ullamcorper arcu, vitae volutpat neque diam eget nisi. Vivamus non metus fringilla odio egestas egestas. Pellentesque adipiscing tincidunt molestie. Aenean urna dui, convallis vitae aliquam at, viverra adipiscing nunc. Morbi orci diam, facilisis eget ultrices porta, viverra id sapien. Suspendisse ornare nibh in felis rhoncus iaculis. Quisque sodales nisl vitae felis mattis a iaculis mi condimentum. Sed posuere hendrerit purus, ut fringilla justo cursus nec. Etiam nunc sem, laoreet sit amet molestie id, tincidunt id enim.</p>
		<p>Fusce tristique leo nec nisi viverra laoreet. Sed euismod bibendum nunc ut fermentum. Phasellus lacinia sapien mi. Mauris condimentum, enim id eleifend fermentum, dolor ante placerat magna, ac convallis dui sapien a turpis. Duis fringilla condimentum fermentum. In libero metus, viverra eu aliquet sed, laoreet sed justo. Pellentesque sit amet justo velit. Donec sed leo nunc, ac convallis augue. Duis rutrum accumsan scelerisque. Etiam consequat volutpat augue, a congue tellus tempus at. Ut facilisis justo quis nisl bibendum in vestibulum nisi placerat. Nullam ipsum sapien, scelerisque non semper sit amet, gravida a leo. Donec sit amet sem felis. Curabitur a nunc quis nisl aliquet laoreet in ac augue. Nulla id tellus quis magna egestas suscipit id ac nisi. Praesent at dolor nulla, quis venenatis lacus. Etiam placerat feugiat arcu, eu eleifend nisl convallis sit amet. Nam varius ultrices erat, eget porttitor elit viverra vitae.</p>
		<p>Aliquam odio ante, elementum id feugiat vitae, viverra tincidunt enim. Duis dictum erat nec lacus malesuada elementum. Sed in ligula in mauris lobortis interdum. Pellentesque dolor metus, volutpat a sollicitudin vitae, suscipit sed mauris. Nulla tincidunt lectus et leo adipiscing dignissim. Phasellus mattis varius blandit. Maecenas leo lacus, congue quis accumsan a, dictum at metus. Nulla ut porta libero. Etiam dolor sapien, convallis elementum placerat ac, gravida vitae enim. Cras iaculis interdum urna id sodales. Ut eget ligula sapien. Proin eget nibh magna, condimentum venenatis turpis. Proin sagittis scelerisque libero ornare fermentum.</p>
		<p>Maecenas vel nisl ligula. Vivamus vel massa ut quam aliquet placerat quis at tellus. Nunc sed erat sapien, vitae lacinia lacus. Etiam condimentum dolor nisl, facilisis sodales ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur tempor, justo vehicula tristique scelerisque, ipsum sapien ullamcorper arcu, vitae volutpat neque diam eget nisi. Vivamus non metus fringilla odio egestas egestas. Pellentesque adipiscing tincidunt molestie. Aenean urna dui, convallis vitae aliquam at, viverra adipiscing nunc. Morbi orci diam, facilisis eget ultrices porta, viverra id sapien. Suspendisse ornare nibh in felis rhoncus iaculis. Quisque sodales nisl vitae felis mattis a iaculis mi condimentum. Sed posuere hendrerit purus, ut fringilla justo cursus nec. Etiam nunc sem, laoreet sit amet molestie id, tincidunt id enim.</p>
		<p>Fusce tristique leo nec nisi viverra laoreet. Sed euismod bibendum nunc ut fermentum. Phasellus lacinia sapien mi. Mauris condimentum, enim id eleifend fermentum, dolor ante placerat magna, ac convallis dui sapien a turpis. Duis fringilla condimentum fermentum. In libero metus, viverra eu aliquet sed, laoreet sed justo. Pellentesque sit amet justo velit. Donec sed leo nunc, ac convallis augue. Duis rutrum accumsan scelerisque. Etiam consequat volutpat augue, a congue tellus tempus at. Ut facilisis justo quis nisl bibendum in vestibulum nisi placerat. Nullam ipsum sapien, scelerisque non semper sit amet, gravida a leo. Donec sit amet sem felis. Curabitur a nunc quis nisl aliquet laoreet in ac augue. Nulla id tellus quis magna egestas suscipit id ac nisi. Praesent at dolor nulla, quis venenatis lacus. Etiam placerat feugiat arcu, eu eleifend nisl convallis sit amet. Nam varius ultrices erat, eget porttitor elit viverra vitae.</p>
	</div>
</div>

	<script type="text/javascript" charset="utf-8" src="../../../src/loader.js"></script>
	<script type="text/javascript">		HmJS.$JSManager.$basepath = '../../../src/';</script>
	<script type="text/javascript" charset="utf-8" src="../../../src/demo/action/util/effect/staticscroller.js"></script>
</body>
</html>
